<template>
  <view class="enterprise-entry" style="background: #f5f9ff; min-height: 100vh;">
    <!-- 标题 -->
    <view style="padding: 10px 20px;text-align: center;">
      <text style="font-size: 18px; font-weight: bold;">企业入驻</text>
    </view>

    <!-- 步骤选项卡 -->
    <view style="display: flex; border-bottom: 1px solid #eee; background-color: #fff;">
      <view 
        style="flex: 1; text-align: center; padding: 15px 0; border-bottom: 2px solid #1a73e8;"
        @click="switchTab1">
        <text style="color: #1a73e8;">企业资质信息</text>
      </view>
      <view 
        style="flex: 1; text-align: center; padding: 15px 0;"
        @click="switchTab2">
        <text style="color: #666;">企业展示信息</text>
      </view>
      <view 
        style="flex: 1; text-align: center; padding: 15px 0;"
        @click="switchTab3">
        <text style="color: #666;">运营者信息</text>
      </view>
    </view>

    <!-- 表单内容 -->
    <view style="padding: 20px;">
      <!-- 营业执照上传 -->
      <view style="margin-bottom: 25px;">
        <text style="font-size: 16px; font-weight: bold; display: block; margin-bottom: 10px;">*营业执照</text>
        <view 
          style="background-color: #fff; border-radius: 8px; padding: 30px; text-align: center; border: 1px dashed #ccc;"
          @click="uploadLicense">
          <view v-if="!licenseImage" style="width: 60px; height: 60px; background-color: #f5f9ff; border-radius: 30px; display: inline-flex; justify-content: center; align-items: center; margin-bottom: 10px;">
            <text style="color: #1a73e8; font-size: 24px;">+</text>
          </view>
          <image v-else :src="licenseImage" style="width: 100%; height: 150px; border-radius: 4px; margin-bottom: 10px;"></image>
          <text style="font-size: 12px; color: #999; display: block; margin-top: 5px;">支持JPG/PNG/JPEG格式图片</text>
          <text style="font-size: 12px; color: #999; display: block; margin-top: 2px;">大小<=5M</text>
          <text style="font-size: 12px; color: #999; display: block; margin-top: 2px;">营业执照原件的彩色扫描件或复印件，必须加盖公章</text>
        </view>
      </view>

      <!-- 企业注册名称 -->
      <view style="margin-bottom: 20px;">
        <text style="font-size: 16px; font-weight: bold; display: block; margin-bottom: 10px;">*企业注册名称</text>
        <input 
          type="text" 
          :value="companyName"
          placeholder="请填写营业执照上的全称"
          disabled
          style="background-color: #fff; border-radius: 8px; padding: 15px; width: 100%; box-sizing: border-box; color: #999;"
        />
      </view>

      <!-- 营业执照号 -->
      <view style="margin-bottom: 20px;">
        <text style="font-size: 16px; font-weight: bold; display: block; margin-bottom: 10px;">*营业执照号</text>
        <input 
          type="text" 
          :value="licenseNumber"
          placeholder="请填写统一社会信用代码"
          disabled
          style="background-color: #fff; border-radius: 8px; padding: 15px; width: 100%; box-sizing: border-box; color: #999;"
        />
        <text v-if="showLicenseError" style="font-size: 12px; color: #ff4d4f; margin-top: 5px; display: block;">营业执照不能为空</text>
      </view>

      <!-- 企业所属行业 -->
      <view style="margin-bottom: 30px;">
        <text style="font-size: 16px; font-weight: bold; display: block; margin-bottom: 10px;">*企业所属行业</text>
        <view 
          style="background-color: #fff; border-radius: 8px; padding: 15px; position: relative;"
          @click="showIndustryPicker = true">
          <text :style="{color: industry ? '#333' : '#999'}">{{ industry || '请选中所属行业' }}</text>
          <view style="position: absolute; right: 15px; top: 50%; transform: translateY(-50%);">
            <view style="width: 10px; height: 10px; border-right: 2px solid #999; border-bottom: 2px solid #999; transform: rotate(45deg);"></view>
          </view>
        </view>
      </view>

      <!-- 下一步按钮 -->
      <view 
        style="background-color: #1a73e8; border-radius: 8px; padding: 16px; text-align: center;"
        @click="goToNextStep">
        <text style="color: #fff; font-size: 16px; font-weight: bold;">下一步</text>
      </view>
    </view>

    <!-- 行业选择器 -->
    <uni-popup ref="industryPicker" type="bottom">
      <view style="background-color: #fff; border-top-left-radius: 12px; border-top-right-radius: 12px; padding: 20px;">
        <view style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
          <text style="font-size: 18px; font-weight: bold;">选择行业</text>
          <text style="color: #1a73e8;" @click="hideIndustryPicker">完成</text>
        </view>
        <picker-view style="height: 300px;" @change="changeIndustry">
          <picker-view-column>
            <view v-for="(item, index) in industries" :key="index" style="text-align: center; line-height: 50px;">
              {{ item }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 1, // 当前激活的选项卡
      licenseImage: '', // 营业执照图片
      companyName: '', // 企业名称
      licenseNumber: '', // 营业执照号
      showLicenseError: false, // 显示营业执照错误
      industry: '', // 所属行业
      showIndustryPicker: false, // 显示行业选择器
      industries: [
        '餐饮美食',
        '零售百货',
        '教育培训',
        '医疗健康',
        '生活服务',
        'IT互联网',
        '金融保险',
        '房地产',
        '文化娱乐',
        '其他'
      ]
    }
  },
  methods: {
    // 切换选项卡
    switchTab1() {
      uni.navigateTo({
        url: '/pages/b/manager/04/business_settlement2'
      })
    },
    switchTab2() {
      uni.navigateTo({
        url: '/pages/b/manager/04/business_settlement3'
      })
    },
    switchTab3() {
      uni.navigateTo({
        url: '/pages/b/manager/04/business_settlement4'
      })
    },
    
    // 上传营业执照
    uploadLicense() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.licenseImage = res.tempFilePaths[0]
        }
      })
    },
    
    // 选择行业
    changeIndustry(e) {
      const index = e.detail.value[0]
      this.industry = this.industries[index]
    },
    
    // 隐藏行业选择器
    hideIndustryPicker() {
      this.showIndustryPicker = false
    },
    
    // 下一步
    goToNextStep() {
      if (!this.licenseNumber) {
        this.showLicenseError = true
        return
      }
      uni.navigateTo({
        url: '/pages/b/manager/04/business_settlement3'
      })
    },
    
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style>
.enterprise-entry {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
              Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
</style>